import { useStore } from '@/hooks';
import { t } from '@lingui/macro';
import { observer } from 'mobx-react-lite';
import React, { useEffect } from 'react';
import { MAGIC_NUMBERS } from '../stores/definitions';
import { toJS } from 'mobx';
import { Loading, Grid } from '@alifd/next';

const { Row, Col } = Grid;


const TotalPriceBar = (props) => {
  const { type } = props;
  const { orderReportStore: store } = useStore();
  const { SUMMARY_TYPE } = toJS(MAGIC_NUMBERS);
  const summaryTypes = {
    ticket: [
      SUMMARY_TYPE.realIncome,
      SUMMARY_TYPE.refund,
      SUMMARY_TYPE.paid,
      SUMMARY_TYPE.profit,
    ],
    order: [
      SUMMARY_TYPE.realIncome,
      SUMMARY_TYPE.refund,
      SUMMARY_TYPE.paid,
      SUMMARY_TYPE.profit,
      SUMMARY_TYPE.company,
      SUMMARY_TYPE.driver,
    ],
  };

  useEffect(() => {
    store.summaryTypes = summaryTypes[type];
  }, [type]);
  const summary = toJS(store.summaryData);

  const getShowList = () => {
    switch (type) {
      case 'ticket': return [
        { title: t`实收合计`, value: summary[SUMMARY_TYPE.realIncome] },
        { title: t`退款合计`, value: summary[SUMMARY_TYPE.refund] },
        { title: t`支出合计`, value: summary[SUMMARY_TYPE.paid] },
        { title: t`利润合计`, value: summary[SUMMARY_TYPE.profit] },
      ];
      case 'order': return [
        { title: t`实收合计`, value: summary[SUMMARY_TYPE.realIncome] },
        { title: t`退款合计`, value: summary[SUMMARY_TYPE.refund] },
        { title: t`支出合计`, value: summary[SUMMARY_TYPE.paid] },
        { title: t`利润合计`, value: summary[SUMMARY_TYPE.profit] },
        { title: t`承运商合计`, value: summary[SUMMARY_TYPE.company] },
        { title: t`司机合计`, value: summary[SUMMARY_TYPE.driver] },
      ];
      default: return [];
    }
  };

  // 格式化金额
  const formatPrice = (price) => {
    return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  };

  return (
    <div style={{ width: '100%', margin: '20px' }}>
      <Loading visible={store.loadingTotal}>
        <Row>
          {getShowList().map((item) => {
            return (
              <Col style={{ width: '190px' }} >
                <span>{item.title}</span>:
                <span style={{ color: 'red' }}>{`¥${formatPrice(item.value || 0)}元`}</span>
              </Col>
            );
          })}
        </Row>
      </Loading>
    </div>
  );
};

export default observer(TotalPriceBar);
